<template>
  <div class="main">
    <van-checkbox-group v-model="result">
        <van-checkbox name="a" checked-color="#455357" @click="check">风光休闲 🍊</van-checkbox>
        <van-checkbox name="b" checked-color="#455357" @click="check">蜜月旅行 🍇</van-checkbox>
        <van-checkbox name="c" checked-color="#455357" @click="check">光影拍照 🍑</van-checkbox>
        <van-checkbox name="d" checked-color="#455357" @click="check">购物享受 🍄</van-checkbox>
        <van-checkbox name="e" checked-color="#455357" @click="check">亲子度假 🍉</van-checkbox>
        <van-checkbox name="f" checked-color="#455357" @click="check">美食盛宴 🍜</van-checkbox>
        <van-checkbox name="g" checked-color="#455357" @click="check">游学充电 🥟</van-checkbox>
        <van-checkbox name="h" checked-color="#455357" @click="check">人文历史 🍭</van-checkbox>
        <van-checkbox name="i" checked-color="#455357" @click="check">旅拍婚纱 👰</van-checkbox>
        <van-checkbox name="j" checked-color="#455357" @click="check">酒店体验 ✈</van-checkbox>
    </van-checkbox-group>
  </div>
</template>

<script>
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
export default {
data() {
    return {
      result: [],
    };
  },
methods: {
    check(){
      // 空值判断
      if(this.result.length <=0){
        // 下一步按钮失效
        
      }
        // console.log(this.result);
    }
}
}
</script>

<style scoped>
.main{
    margin-left: 20%;
}
.van-checkbox{
    font-size: 20px;
    font-family:serif;
    font-weight: bold;
    margin-top: 30px !important;
}
</style>